<template>
  <div class="brand">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="7">
            <goodsList></goodsList>
          </el-col>
          <el-col :span="17">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>品牌列表</span>
              </div>
              <div class="brand-list">
                <div class="brand-item" v-for="(item,index) in bindList" :key="index">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.img"
                    fit="contain"></el-image>
                  <div class="item-name">{{item.name}}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import goodsList from '~/components/goodsList.vue'
  import topBar from '~/components/topBar.vue'

  export default {
    name: "brand",
    components: {
      goodsList,
      topBar
    },
    data() {
      return {
        bindList: [
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          },
          {
            img: 'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/demo/manufacturer/manuf-4-100x100.png',
            name: 'Columbia'
          }
        ]
      }
    }
  }
</script>

<style lang="less">
  .brand {
    .brand-list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .brand-item {
        text-align: center;
        padding: 10px 20px;
      }
    }
  }
</style>
